<template>
  <div>
    <el-table :data="customerBills"
              border
              style="width: 100%">
      <el-table-column prop="id"
                       label="序号"
                       width="50">
      </el-table-column>
      <el-table-column prop="name"
                       label="商品的名称"
                       width="120">
      </el-table-column>
      <el-table-column prop="num"
                       label="商品数量"
                       width="80">
      </el-table-column>
      <el-table-column prop="purchase_price"
                       width="80"
                       label="商品进价">
      </el-table-column>
      <el-table-column width="100"
                       label="单笔总金额">
        <template slot-scope="scoped">
          {{scoped.row.num * scoped.row.purchase_price}}
        </template>
      </el-table-column>
      <el-table-column prop="pay_type"
                       width="100"
                       label="支付方式"
                       :formatter="formatterPayType">
      </el-table-column>
      <el-table-column prop="status"
                       width="100"
                       label="支付状态"
                       :formatter="formatterStatus">
      </el-table-column>
      <el-table-column prop="create_date"
                       width="180"
                       label="创建时间"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scoped">
          <el-button size="mini"
                     @click="openGoods(scoped.row.goods_id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { utctobeijing } from '@/utils/formatterDate.js'
export default {
  props: ['customerBills'],
  methods: {
    formatterDate (row, column, cellValue, index) {
      return utctobeijing(cellValue);
    },
    formatterStatus (row, column, cellValue, index) {
      if (cellValue == 'payment') {
        return '已结算';
      } else {
        return '没有此支付方式';
      }
    },
    formatterPayType (row, column, cellValue, index) {
      if (cellValue == 'wx_pay') {
        return '微信支付';
      } else {
        return '没有此支付方式';
      }
    },
    openGoods (id) {
      this.$parent.$refs.dialogInfoVue.open(id);
    }
  }
}
</script>

<style lang="less" scoped>
</style>